{% extends 'layout/main.html' %}
{% from 'bootstrap/form.html' import render_form %}
{% from 'macros/_macros.html' import form_field %}
{% block content_header %}
    <h1>
      更新文章
    </h1>
    <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
    <li><a href="#">文章管理</a></li>
    <li class="active">更新文章</li>
    </ol>
{% endblock %}

{% block content %}
<div class="box">
  <div class="box-body">
      <form method="post" action="">
        {{ form.csrf_token }}
        {{ form.thumb }}
        {{ form_field(form.cid, class_='form-control')}}
        {{ form_field(form.title, class_='form-control')}}

        <div class="form-group">
          <label for="title">{{ form.thumb.label.text }}</label>
          <ul class="mailbox-attachments clearfix">
            <li>
              <div id="image_preview"><img src="{{ form.thumb.data }}" style="width:198px;" class="img-responsive"></div>
              <div class="mailbox-attachment-info">
                <div class="btn btn-default btn-block btn-file">
                  <i class="fa fa-paperclip"></i> {{ form.thumb.label.text }}
                  <input id="upload" name="upload" type="file">
                </div>
              </div>
            </li>
          </ul>
        </div>

        {{ form_field(form.url, class_='form-control')}}
        <div class="form-group">
          {{ form.content.label }}
          {{ form.content(class_='form-control') }}
          {% for message in form.content.errors %}
          <p class="text-danger">{{ message }}</p>
          {% endfor %}
        </div>
          {{ form.submit(class_='btn btn-primary') }}
      </form>
  </div>
</div>
{{ ckeditor.load() }}
{{ ckeditor.config(name='content') }}
{% endblock %}

  {% block scripts %}
  {{ super() }}
  <script type="text/javascript">
    $(function () {
      $('#upload').bind('change', function () {
        let formData = new FormData()
        formData.append('csrf_token', '{{ csrf_token() }}')
        formData.append('upload', $(this)[0].files[0])
        $.post({
          url: "{{ url_for('.upload_image') }}",
          data: formData,
          contentType: false,
          processData: false,
          success: function (result) {
            if (result.uploaded) {
              $('#image_preview').empty()
              $('#image_preview').append('<img src="' + result.url + '" style="width:198px;" class="img-responsive">')
              $('#thumb').attr("value", result.url)
            }
          }
        })
      })
    })
  </script>
  {% endblock scripts %}